<script setup lang="ts">
import { useChannelStore } from '@/stores/channel'
import type { ChannelItem, ChannelResData } from '@/types/data'
import axios from 'axios'
import { onMounted, ref } from 'vue'
// 使用泛型进行类型约束
const list = ref<ChannelItem[]>([])
onMounted(async () => {
  const res = await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
  // console.log(res.data.data)
  // 赋值
  list.value = res.data.data.channels
})

// 从 pinia 中获取数据
const store = useChannelStore()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <!--  :class="{ active:  } 控制高亮-->
      <a
        class="item"
        :class="{ active: item.id === store.channelId }"
        href="javascript:;"
        v-for="(item, i) in list"
        :key="item.id"
        @click="store.changeId(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
